<template>
  <div class="app-container">
    <el-form :rules="rules" ref="dataForm" :model="tempResource" label-width="130px">
      <el-form-item label="Resource Name" prop="resources_name">
        <el-input v-model="tempResource.resources_name"></el-input>
      </el-form-item>
      <el-form-item label="Type" prop="type">
        <el-select v-model="tempResource.type" placeholder="please select resource type">
          <el-option v-for="item in  typeList" :key="item.type_name" :label="item.type_name" :value="item.type_name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Total Amount" prop="total_amount">
        <el-input v-model="tempResource.total_amount"></el-input>
      </el-form-item>
      <el-form-item label="Unit" prop="unit">
        <el-input v-model="tempResource.unit"></el-input>
      </el-form-item>
      <el-form-item label="Price" prop="price">
        <el-input v-model="tempResource.price"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="createData">Create</el-button>
        <el-button  @click="onCancel">Return</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import { addResources } from '@/api/resource'

export default {
  data() {
    return {
      rolesList: null,
      tempResource: {
        resources_name: '',
        type: '',
        total_amount: '',
        price: '',
        unit: ''
      },
      rules: {
        resources_name: [{ required: true, message: 'Resource name is required', trigger: 'change' }],
        type: [{ required: true, message: 'Type is required', trigger: 'change' }],
        total_amount: [{ required: true, message: 'Amount is required', trigger: 'change' }],
        unit: [{ required: true, message: 'Unit is required', trigger: 'change' }],
        price: [{ required: true, message: 'Price is required', trigger: 'change' }]
      },
      type: 'create',
      typeList: [{ 'type_name': 'Computer' }, { 'type_name': 'PC components' }]
    }
  },
  created: function() {
    if (this.$route.params.type !== undefined) {
      this.tempResource = this.$route.params.resource
      this.type = this.$route.params.type
    }
    //this.getRolesList()
  },
  methods: {
    /*getRolesList() {
      getAllRoles().then(response => {
        this.rolesList = response
      })
    },*/
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          addResources(this.tempResource).then(() => {
            this.$notify({
              title: 'Success',
              message: 'Modify Success!',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    onCancel() {
      this.$refs['dataForm'].resetFields()
      this.$notify({
        title: 'Cancel',
        message: 'Cancel Success!',
        type: 'success',
        duration: 2000
      })
      this.$router.push({
        name: 'QueryResources', params: {
        }
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

